<template>
	<view class="login" :class="theme+'-bg-middle'">
		<view class="logoBox">
			<view class="logo" :class="theme+'-bg-abox'">
				<image src="../../../../static/logo.png"></image>
			</view>
		</view>
		<view class="from">
			<view class="tips" :class="theme + '-ftitle-color'">
				<view class="text">
					<text>{{$t('login.Phonenumber')}}</text>
				</view>
				<view class="input" :class="theme+'-border-inputb'">
					<uni-easyinput v-model="phone" type="number" focus maxlength="11" :inputBorder="false">
					</uni-easyinput>
				</view>
			</view>
			<view class="tips" :class="theme + '-ftitle-color'">
				<view class="text">
					<text>{{$t('login.Password')}}</text>
				</view>
				<view class="input" :class="theme+'-border-inputb'">
					<uni-easyinput v-model="pwd" type="password" :inputBorder="false"></uni-easyinput>
				</view>
			</view>
			<view class="btn">
				<view class="registerBtn br-1" @click="go" :class="theme+'-border-input'">
					<text :class="theme + '-ftitle-color'">{{$t('login.Register')}}</text>
				</view>
				<view class="loginBtn br-1" @click="login()" :class="theme+'-bg-abox'">
					<text>{{$t('login.Login')}}</text>
				</view>
			</view>
			<view class="forget">
				<view></view>
				<view class="an" :class="theme + '-ftitle-color'">
					<text>{{$t('login.Forgetthepassword')}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 登录页面
	export default {
		data() {
			return {
				phone: '',
				pwd: '',
				userInformation: uni.getStorageSync('userInformation'),
			};
		},
		onLoad() {
			this.$theme()
		},
		methods: {
			go() {
				uni.navigateTo({
					url: '../register/Register'
				})
			},
			login() {

				if (this.phone === "" || this.pwd === "") {
					uni.showToast({
						title: "手机号或密码为空。",
						icon: 'none'
					});
				} else {
					uni.showLoading({
						title: '登录中...'
					})
					this.$post('/login/app', {
						phone: this.phone,
						pwd: this.pwd
					}).then((res) => {
						console.log(res)
						uni.hideLoading()
						if (res.code != 20000) {
							uni.showToast({
								title: "该用户不存在。",
								icon: 'none'
							});
						} else {
							uni.setStorage({
								key: 'userInformation',
								data: res.data
							})

							this.phone = "";
							this.pwd = "";

							uni.showToast({
								title: "登录成功",
								icon: 'none'
							});
							setTimeout(() => {
								uni.redirectTo({
									url: '../MyAccount'
								})
							}, 300)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.login {
		height: 100%;

		.logoBox {
			display: flex;
			padding: 80rpx 0;
			justify-content: center;

			.logo {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}

		.from {
			padding: 0 80rpx;

			.tips {
				margin-bottom: 40rpx;

				.text {
					font-size: 24rpx;
				}

				.input {
					// border-bottom: 2rpx solid #0081FF;
				}
			}

			.btn {
				margin-top: 80rpx;
				display: flex;
				justify-content: space-between;


				view {
					width: 270rpx;
					height: 88rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 30rpx;
					font-weight: 700;
				}

				.registerBtn {
					box-sizing: border-box;
					// border: 4rpx solid #0081FF;
					// color: #0081FF;
				}

				.loginBtn {
					// background-color: #0081FF;
					color: #FFFFFF;
				}
			}

			.forget {
				display: flex;
				justify-content: space-between;
				margin-top: 55rpx;

				.an {
					font-size: 26rpx;
					// color: #0081FF;
				}
			}
		}
	}
</style>
